<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据图表</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	</head>
	<body>
		<div id="container" style="height:18rem"></div>
	</body>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
	<script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var userid = $api.getStorage('userSession').data.id;
			var id = api.pageParam.id;
			var name = api.pageParam.name;
			$.ajax({
				type : "post",
				//async : false, //同步执行
				url : BaseServiceUrl + "mobile/showData/ge.json",
				data : {
					id : id
				},
				dataType : "json", //返回数据形式为json
				success : function(result) {
				
				
				var de = [];
				  for (var i = 0; i < result.time.length; i++) {
              
                  de.push(timestampToTime(result.time[i]))
                }
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					myChart.setOption( option = {
						title : {
							text : name
						},
						tooltip : {
							trigger : 'axis'
						},
						xAxis : {
							data : de
						},
						yAxis : {
							splitLine : {
								show : false
							}
						},
						toolbox : {
							left : 'center',
							feature : {
								dataZoom : {
									yAxisIndex : 'none'
								},
								restore : {},
								saveAsImage : {}
							}
						},
						dataZoom : [{
							startValue : '2014-06-01'
						}, {
							type : 'inside'
						}],
						visualMap : {
							top : 10,
							right : 10,
							pieces : [{
								gt : 0,
								lte : 50,
								color : '#096'
							}, {
								gt : 50,
								lte : 100,
								color : '#ffde33'
							}, {
								gt : 100,
								lte : 150,
								color : '#ff9933'
							}, {
								gt : 150,
								lte : 200,
								color : '#cc0033'
							}, {
								gt : 200,
								lte : 300,
								color : '#660099'
							}, {
								gt : 300,
								color : '#7e0023'
							}],
							outOfRange : {
								color : '#999'
							}
						},
						series : {
							name : '',
							type : 'line',
							data : result.data
							//							markLine : {
							//								silent : true,
							//								data : [{
							//									yAxis : 50
							//								}, {
							//									yAxis : 100
							//								}, {
							//									yAxis : 150
							//								}, {
							//									yAxis : 200
							//								}, {
							//									yAxis : 300
							//								}]
							//							}
						}
					});
					;
					if (option && typeof option === "object") {
						myChart.setOption(option, true);
					}
				}
			});
		};
		function timestampToTime(timestamp) {
			var date = new Date(timestamp);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() + ' ';
			var h = date.getHours() + ':';
			var m = date.getMinutes() + ':';
			var s = date.getSeconds();
			return Y + M + D + h + m + s;
		}
	</script>
</html>
